<script setup lang="ts">
import { templateStore } from '@/stores/template.ts'
import { storeToRefs } from 'pinia'

const countStore = templateStore()
const { count } = storeToRefs(countStore)

import router from '@/router'
import { useRoute } from 'vue-router'

const route = useRoute()

const handleClick = () => {
  if (route.name === 'home') {
    router.push({ name: 'about' })
  } else {
    router.push({ name: 'home' })
  }
}
</script>

<template>
  <div class="sticky top-0 z-10 flex flex-row">
    <div class="flex h-24 flex-4 items-center justify-center bg-pink-400 text-4xl text-cyan-300">
      ZeYang 的 Vue3 项目模板
    </div>
    <div class="flex h-24 flex-1 items-center justify-center bg-yellow-400">
      <button
        @click="handleClick"
        class="rounded-full bg-amber-900 p-2 text-2xl font-bold text-gray-800"
      >
        {{ route.name }}
      </button>
    </div>
    <div class="flex h-24 flex-1 items-center justify-between bg-green-400 p-4">
      <button
        @click="countStore.increment"
        class="flex h-16 w-16 transform cursor-pointer items-center justify-center rounded-full bg-pink-400 text-2xl font-bold text-white shadow-lg transition-all duration-300 hover:scale-105"
      >
        +
      </button>
      <div class="text-3xl text-red-500">{{ count }}</div>
      <button
        @click="countStore.decrement"
        :disabled="count === 0"
        class="flex h-16 w-16 transform cursor-pointer items-center justify-center rounded-full bg-pink-400 bg-gradient-to-r text-2xl font-bold text-white shadow-lg transition-all duration-300 hover:scale-105 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:opacity-60 disabled:shadow-none disabled:hover:scale-100"
      >
        -
      </button>
    </div>
  </div>
</template>

<style scoped></style>
